// template模板，编写HTML代码
<template>
  <div class="box">
    <input type="text" v-model="num1">
    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="num2">
    <button @click="calc">=</button>
    <input type="text" v-model="result">
  </div>
</template>

// script脚本，编写JS代码
<script setup>
  import {ref , reactive } from 'vue'
  let num1=ref(0)
  let num2=ref(0)
  let result=ref(0)
  let operator=ref('+')

  const calc = ()=>{
    switch(operator.value){
      case "+":
         result.value = parseInt(num1.value) + parseInt(num2.value)
        break;
      case "-":
         result.value = parseInt(num1.value) - parseInt(num2.value)
        break;
      case "*":
         result.value = parseInt(num1.value) * parseInt(num2.value)
        break;
      case "/":
         result.value = parseInt(num1.value) / parseInt(num2.value)
        break;        
    }
  }
</script>

// style样式，编写CSS代码  scoped表示样式只对当前组件有效
<style scoped>

</style>